<template>
  <i
    class="iconfont line-height-1"
    :class="{ 'use-hover': useHover }"
    :style="style"
    @click="click"
    v-html="code"
  />
</template>

<script>
  export default {
    props: {
      code: {
        type: String,
        default: '',
      },
      fontSize: {
        type: [Number, String],
        default: '',
      },
      color: {
        type: String,
        default: '',
      },
      useHover: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['click'],
    data() {
      return {};
    },
    computed: {
      style() {
        return {
          'font-size': this.fontSize ? `${this.fontSize}px` : `${this.fontSize}px`,
          color: this.color || undefined,
        };
      },
    },
    methods: {
      click(event) {
        this.$emit('click', event);
      },
    },
  };
</script>

<style lang="scss">
  .use-hover {
    &:hover {
      background: #fff;
    }
  }
</style>
